<template>
	<view class="orderdetails u-skeleton" :style="{minHeight:screen + 'px'}">
		<u-navbar :titleStyle="{fontWeight:'bold'}" title="订单详情" />
		<view class="orderls-card" :style="{paddingBottom:(60+safeArea) + 'px'}">
			<view class="orderls-statu u-skeleton-fillet" :class="detail.status==1?'show':''">{{detail.status_name}}
				<view class="orderls-icon u-skeleton-circle">
					<u-icon name="arrow-right" color="#000" size="15"></u-icon>
				</view>
				<view class="orderls-goodstips" v-if="detail.status==1">{{detail.order_intro}}</view>
			</view>
			<view class="orderls-form">
				<view class="orderls-info u-skeleton-fillet">
					<view class="orderls-totie">收货地址:</view>
					<view class="orderls-right">
						<view class="orderls-text u-line-1">{{format(user_addr.addr)}}{{user_addr.addr_extra}}</view>
						<view class="orderls-number">
							<view class="orderls-name u-line-1">{{user_addr.name}}</view>
							<view class="orderls-phone">{{user_addr.phone}}</view>
						</view>
					</view>
				</view>
			</view>
			<view class="orderls-form u-skeleton-fillet">
				<view class="orderls-subtitle">商品信息</view>
				<order-item :route="false" :item="detail" mode="1"/>
				<view class="orderls-dliter">
					<view class="orderls-flex u-skeleton-circle">
						<view class="orderls-left">订单号：</view>
						<view class="orderls-vluer"><b class="orderls-copy" @click="copyChang(detail.no)">复制</b>{{detail.no}}</view>
					</view>
					<view class="orderls-flex u-skeleton-circle">
						<view class="orderls-left">商品总额：</view>
						<view class="orderls-vluer">￥{{detail.money}}</view>
					</view>
					<view class="orderls-flex u-skeleton-circle">
						<view class="orderls-left">应付金额：</view>
						<view class="orderls-vluer show">￥{{detail.pay_money}}</view>
					</view>
					<view class="orderls-flex u-skeleton-circle">
						<view class="orderls-left">优惠金额：</view>
						<view class="orderls-vluer show">-￥{{detail.coupon_dis_money}}</view>
					</view>
					<view class="orderls-flex u-skeleton-circle">
						<view class="orderls-left">运费：</view>
						<view class="orderls-vluer">￥{{detail.freight_money}}</view>
					</view>
					<template v-if="$u.test.object(detail.logistics)">
						<view class="orderls-flex u-skeleton-circle">
							<view class="orderls-left">快递公司：</view>
							<view class="orderls-vluer">{{detail.logistics.name}}</view>
						</view>
						<view class="orderls-flex u-skeleton-circle">
							<view class="orderls-left">快递单号：</view>
							<view class="orderls-vluer"><b class="orderls-copy" @click="copyChang(detail.logistics.no)">复制</b>{{detail.logistics.no}}</view>
						</view>
					</template>
					<view class="orderls-flex u-skeleton-circle">
						<view class="orderls-left">下单时间：</view>
						<view class="orderls-vluer">{{detail.create_time}}</view>
					</view>
					<template v-if="detail.is_pay">
						<view class="orderls-flex u-skeleton-circle">
							<view class="orderls-left">支付时间：</view>
							<view class="orderls-vluer">{{detail.pay_time}}</view>
						</view>
						<view class="orderls-flex u-skeleton-circle">
							<view class="orderls-left">支付类型：</view>
							<view class="orderls-vluer">微信支付</view>
						</view>
					</template>
					<view class="orderls-flex u-skeleton-circle">
						<view class="orderls-left">留言备注：</view>
						<view class="orderls-vluer">{{detail.remark||'暂无'}}</view>
					</view>
				</view>
			</view>
		</view>
		<statusbar>
			<view class="confimorder-botem u-skeleton-circle">
				<button class="cu-btn confimorder-button" open-type="contact">
					<view class="confimorder-pacie">联系客服</view>
				</button>
			</view>
		</statusbar>
		<u-skelete :loading="loading" animation />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading:true,
				o_id:'',
				detail:{}
			};
		},
		onLoad(e){
			this.o_id = e.id
			this.getdetails(e.id)
		},
		computed:{
			user_addr(){
				return this.detail.user_addr || {}
			}
		},
		methods:{
			format(e) {
				return e && e.replace(/\s/g, "")
			},
			getdetails(order_id){
				this.$network('/api/order/detail',{
					order_id
				}).then(res=>{
					const { detail} =res.data
					this.detail = detail
				}).finally((e) => {
					this.$nextTick(() => {
						setTimeout(() => {
							this.loading = false
						}, 600)
					})
				})
			}
		}
	}
</script>

<style lang="scss">
page{
	background: #F5F5F5;
}
	.confimorder-botem {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.confimorder-button {
			width: 100%;
			height: 90rpx;
			background: #FFCF4F;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
			padding: 0;
			margin: 0;
			border-radius: 24px;
		}
	}
.orderls-dliter{
	padding-top: 25rpx;
}
.orderls-flex{
	display: flex;
	align-items: initial;
	justify-content: space-between;
	margin-bottom: 35rpx;
	.orderls-left{
		font-size: 28rpx;
		color: #333;
		width: 30%;
	}
	.orderls-vluer{
		width: 67%;
		font-size: 28rpx;
		color: #333;
		display: flex;
		justify-content: flex-end;
		.orderls-copy{
			padding: 3px 6px;
			background-color: #FFCF4F;
			border-radius: 3px;
			color: #333;
			font-size: 25rpx;
			margin: 0 15rpx 0 0;
		}
		&.show{
			color: red;
		}
	}
}
.orderls-subtitle{
	font-size: 28rpx;
	font-weight: bold;
	color: #000;
}
.orderls-form{
	background: #FFF;
	border-radius: 8px;
	padding: 25rpx 20rpx;
	margin-bottom: 20rpx;
	.orderls-info{
		display: flex;
		align-items: initial;
		justify-content: space-between;
		.orderls-right{
			width: 78%;
			.orderls-number{
				margin-top: 15rpx;
				display: flex;
				align-items: center;
			font-size: 28rpx;
			color: #000;
				.orderls-name{
					max-width: 200rpx;
					margin-right: 15rpx;
				}
			}
			.orderls-text{
				font-size: 28rpx;
				color: #000;
			}
		}
		.orderls-totie{
			width: 18%;
			font-size:28rpx;
			font-weight: 400;
			color: #999999;
		}
	}
}
.orderls-card{
	padding: 0 20rpx;
	.orderls-statu{
		padding: 15px 10px 15px;
		display: flex;
		align-items: center;
		font-size: 45rpx;
		letter-spacing: 1.5px;
		color: #000;
		position: relative;
		&.show{
			margin-bottom: 25rpx;
		}
		.orderls-goodstips{
			position: absolute;
			    left: 9px;
			    bottom: -3px;
			font-size: 25rpx;
			color: #666;
		}
		.orderls-icon{
			position: relative;
			top: 2px;
			margin-left:5rpx;
		}
	}
}
</style>
